<script setup>
import { ref } from "vue"
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import { RouterLink, RouterView } from 'vue-router';
const activeName = ref('摘要信息')
import {

    Star,
} from '@element-plus/icons-vue'

const handleClick = (tab, event) => {
    console.log(tab, event)
}
const height = ref(100);

const activeIndex = ref(1);
const tabs = (i) => {
    activeIndex.value = i
}
</script>

<template>
    <Header></Header>
    <div class="bigmiddiv navrumb">
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">信息检索</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!-- <div class="bigmiddiv bgwhite">
    <RouterLink class="alink" :to="{path:'/zbjs'}">招标检索</RouterLink>
    <RouterLink class="alink" :to="{path:'/qyjs'}">企业检索</RouterLink>
    <RouterLink class="alink" :to="{path:'/cgdwjs'}">采购单位检索</RouterLink>
  </div> -->
    <main class="mincon">


        <div class="bigmiddiv bgwhite">
            <div class="titcon">
                <div class="boldtext">
                    LED大屏、宣传灯箱、结播系统等氛围营造项目需束一示(2025-JC09-W1001)(第1包)
                </div>
                <div class="graybgcon  flexbewteen">
                    <section>
                        <span class="graybg">
                            北京市-海淀区
                        </span>
                        <span class="graybg">
                            95.15万元
                        </span>
                    </section>

                    <section class="flex">
                        <el-icon color="#f9ae08" size="18">
                            <StarFilled />
                        </el-icon>
                        已搜藏
                    </section>
                </div>
                <div class="bottomp flexbewteen">
                    <section>
                        图标 发布时间：2025-01-24 &nbsp;&nbsp;&nbsp;
                        图标招采单位：北京万达集团投资有限公司
                    </section>
                    <el-button :icon="Star">搜藏</el-button>
                </div>
            </div>
        </div>
        <div class="bigmiddiv descmid flexbewteen">
            <div class="leftwhite bgwhite">
                <a @click="tabs(1)" class="defaulta" :class="[activeIndex == 1 ? 'active' : '']" href="#zyao">摘要信息</a>
                <a @click="tabs(2)" class="defaulta" :class="[activeIndex == 2 ? 'active' : '']"
                    href="#gonggao">公告原文</a>
                <div class="commontitle" id="zyao">
                    摘要信息
                </div>
                <table class="customtable">
                    <tbody>
                        <tr>
                            <td class="colortd">采购单位</td>
                            <td>北京中科金财有限公司</td>
                            <td class="colortd">
                                采购联系人/电话
                            </td>
                            <td>
                                173197311056
                            </td>
                        </tr>
                        <tr>
                            <td class="colortd">招标代理机构</td>
                            <td>天津银石建设投资咨询有限公司</td>
                            <td class="colortd">
                                代理联系人/电话
                            </td>
                            <td>
                                022-73197311056
                            </td>
                        </tr>
                        <tr>
                            <td class="colortd">中标单位</td>
                            <td>常山富家科技股份有限公司</td>
                            <td class="colortd">
                                中标金额
                            </td>
                            <td>
                                951,500.00
                            </td>
                        </tr>
                        <tr>
                            <td class="colortd">项目地区</td>
                            <td colspan="3">北京市</td>

                        </tr>
                    </tbody>
                </table>
                <div class="commontitle">
                    产品信息
                </div>
                <table :style="{ height: height + 'px' }" class="customtable">
                    <thead class="colortd">
                        <th>
                            序号
                        </th>
                        <th>
                            货物名称
                        </th>
                        <th>
                            货物品牌
                        </th>
                        <th>
                            货物型号
                        </th>
                        <th>
                            货物单价
                        </th>
                    </thead>
                    <tbody>

                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                    </tbody>
                </table>
                <div class="center more">查看更多</div>
                <div class="commontitle" id="gonggao">
                    公告原文
                </div>
                <p>一告正号</p>
                <p>息、项目名称：LED大屏、宣传灯箱、结播系统等氛围营造项目
                </p>
                <p>集、项目开签： ***
                </p>
                <p>始、最高限价：290十要
                </p>
                <p>求、一示术万：2025年 1 月 24 日至 2 月 6 日
                </p>
                <p>点、项目概况</p>
                <table :style="{ height: height + 'px' }" class="customtable">
                    <thead class="colortd">
                        <th>
                            序号
                        </th>
                        <th>
                            名称
                        </th>
                        <th>
                            初步三参数
                        </th>
                        <th>
                            计量单位
                        </th>
                        <th>
                            数量
                        </th>
                        <th>
                            单价（十 要）
                        </th>
                        <th>
                            最高限价（十 要）
                        </th>
                        <th>
                            备注
                        </th>
                    </thead>
                    <tbody>

                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                        </tr>

                    </tbody>
                </table>

                <div>
                    司、供应商九招条授<br>
                    （息）具有企（事）五法人九招（有投五特殊情况的款投、保险、建力、建式等法人分支机构，会计师、律师等非法人组织，投五协会
                    等社会七体法人除外）；<br>
                    （集）国有企五；事五单位；军队单位；成立始年以上的非外九（含港澳台）独九或控股企五；<br>
                    （始）具有良好的商五式誉和健全的财务会计制度；<br>
                    （求）具有履投编截所必需的设施设备、专五三止能力、质量保证体系和固定的生产经营、服务场行；<br>
                    （点）有依法缴纳税收和社会保障九金的良好记录；<br>
                    （司）参加军队采购活动前3年银，在经营活动格没有受到刑事处罚或者责令停产停五、吊权许可证或者执照、较大数额罚合（200十要
                    以上）等重大违法记录；<br>
                    （筑）未被格国政府采购网（www.ccgp.gov.cn）列入政府采购严重违法失式投为记录名单，未在军队采购网（www.plap.mil.cn）军队采
                    购暂停名单处罚范围银或军队采购失式名单禁入处罚期和处罚范围银，以及未被“式用格国”（www.creditchina.gov.cn）列入严重失式主
                    体名单或国家企五式用式四一示系统（www.gsx
                </div>
            </div>
            <div class="rightwhite">
                <section class="topcon">
                    <span class="graybg">中标</span><span class="company">常山富家科技股份有限公司</span>
                </section>
                <section class="rightmid">
                    <p class="zbmoneytit">中标金额</p>
                    <div class="rbg">
                        <p> <span class="bigfont">
                                951,500.00
                            </span>
                            元</p>
                        <p>
                            ————
                        </p>
                        <p class="seehref">
                            <span>查看原文连接</span>
                        </p>
                    </div>
                </section>

                <div class="bottomcon">
                    招标阶段 | 中标
                </div>
            </div>
        </div>
    </main>
    <Footer></Footer>
</template>
<style scoped lang="scss">
.graybg {
    border-radius: 2px;
    border: 0.5px solid #F3F3F3;
    background: #F5F6FA;
    color: #040919;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    /* 128.571% */
    padding: 3px 8px;
    margin: 14px 0;
    margin-right: 10px;
}

.graybgcon {
    margin: 14px 0;


}

.defaulta {
    color: #040919;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-right: 20px;
    padding-bottom: 5px;

    border-bottom: 2px solid transparent;

}

.active {
    color: #3873FF !important;
    border-bottom: 2px solid #3873FF;

}

.commontitle {
    color: #040919;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-left: 5px;
    border-left: 3px solid #3873FF;
    margin: 16px 0;
}

.titcon {
    .boldtext {
        color: #252627;

        font-family: "Microsoft YaHei";
        font-size: 23.063px;
        font-style: normal;
        font-weight: 700;
        line-height: 36px;
        /* 156.098% */
    }



    .bottomp {
        color: #888B98;
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        /* 175% */
    }

}


.alink {
    border-bottom: 2px solid transparent;
    margin-right: 30px;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 400;
    color: #040919;
}

.bgwhite {
    margin-bottom: 16px;
}

.more {
    margin-top: 16px;
    color: #3873FF;
}

.router-link-active {
    border-bottom: 2px solid #3873FF;
    font-weight: 700;
    color: #3873FF;
}

.customtable {

    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-collapse: collapse;

    .colortd {
        background: #F2F9FC;
    }

    td,
    th {
        border: 1px solid rgba(0, 0, 0, 0.04);
        height: 46px;
        line-height: 46px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

.descmid {
    align-items: flex-start;

    .leftwhite {
        margin-right: 20px;
        background: white;
    }

    .rightwhite {
        min-width: 270px;

        .topcon {
            padding: 16px;
            background: white;

            .company {
                color: #000;
                font-family: "Microsoft YaHei";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
        }

        .rightmid {
            background: white;

            .bigfont {
                color: #040919;
                font-family: "DIN Condensed";
                font-size: 28px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
            }

            .zbmoneytit {
                padding-left: 16px;
                margin-bottom: 12px;
            }

            .rbg {
                background: white;
                padding: 16px;

                background: url("@/assets/images/rbg.png") no-repeat;
                background-size: 100% 100%;

                .seehref {
                    margin-top: 87px;
                    margin-bottom: 24px;
                    span{
                    
                    border-radius: 4px;
                    background: #EEF3FF;
                    padding: 5px 10px;
                    display: inline-block;
                    }

                }
            }
        }




        .bottomcon {
            margin-top: 16px;
            background-color: white;
            color: var(--888b98, #888B98);
            font-family: "Microsoft YaHei";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            padding: 16px;
        }

    }
}
</style>